<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">	
			<f:event type="preRenderView" listener="#{attendanceType.onload}"/>
			<span class="rtitle">Danh sách loại chấm công</span>
	        <hr />
	        <a class="button-link green-bt open-newAttendanceTypeDialog">
	            + Thêm loại chấm công mới
	        </a>
	        <a class="button-link white-bt" id="openSearchButton">
	            <img src="../resources/images/icons/search.png" alt="" />
	        </a>
	        <a class="button-link white-bt reload-btn">
	            <img src="../resources/images/icons/refresh.png" alt="" />
	        </a>
	        <span class="clear"></span>
	        
	        <div id="searchPanel" class="search-panel none">
	        	<h:form id="searchForm">
		        	<span class="search-panel-title">Tên loại chấm công</span>
		        	<h:inputText styleClass="input w80" value="#{attendanceType.nameSearch}"></h:inputText>
		        	<span class="clear"></span>
		        	<h:commandButton value="Tìm kiếm" class="button white-bt" action="#{attendanceType.search}">
		        	</h:commandButton>
		        	<span class="clear"></span>
	        	</h:form>
	        </div>
	        <h:form id="resultForm">
	        <div class="list">
				<div class="nav-page-tp result-paging">
					Trang
					<h:selectOneMenu value="#{attendanceType.currentPage}">
						<f:selectItems value="#{attendanceType.pages}" ></f:selectItems>
					</h:selectOneMenu>
					<h:commandLink id="paging-click" styleClass="hide load" action="#{attendanceType.paging}"></h:commandLink>
				</div>
				<span class="result-detail">Total 106 records. Showing 1 to 20</span>
					<ui:repeat var="var" value="#{attendanceType.listAttendanceType}">
						<div class="list-item">
							<table>
								<tr>
									<td class="list-item-checked">
										<h:selectBooleanCheckbox styleClass="cbx">
										</h:selectBooleanCheckbox>
									</td>
									<td>
										<h:commandLink styleClass="list-item-click open-updateAttendanceTypeDialog"
											actionListener="#{attendanceType.choose}">
											#{var.name}
											<f:ajax render=":formUpdateattendanceType" />
											<f:attribute name="object" value="#{var}"></f:attribute>
										</h:commandLink>
										<br /> 
										<span class="clear"></span> 
										<span class="list-item-created">
										Được tạo bởi 
										<h:outputText value="#{var.created_by}"/> vào 
										<h:outputText value="#{var.created_date}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"/>
										</h:outputText> 
										| Thay đổi bởi 
										<h:outputText value="#{var.modified_by}"/> vào 
										<h:outputText value="#{var.modified_date}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"/>
										</h:outputText>
										</span>
									</td>
								</tr>
							</table>
						</div>
					</ui:repeat>	
				</div>
				</h:form>
        <span class="clear"></span>
        <div class="wrap-dialog none" id="newAttendanceTypeDialog">
			<div class="dialog">
				<span class="dialog-title">Thêm mới loại chấm công<b class="close-dialog">x</b></span>
				<div class="dialog-content">
					<h:form id="formNewAttendanceType">
					<table class="input-column w100">
						<tr>
							<td>
								<div class="input-item">
		        					<span class="block required">Tên loại chấm công <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
		        					<h:inputText styleClass="input w80" value="#{attendanceType.attendanceType.name}" required="true"
		        					requiredMessage="Tên không được để trống"
		        					maxlength="100"></h:inputText>
		        					<span class="italic block">Tên loại chấm công không được phép trùng nhau</span>
		        					<span class="block">Mô tả</span>
		        					<h:inputTextarea styleClass="textarea w80 " value="#{attendanceType.attendanceType.description}"
		        					maxlength="100"></h:inputTextarea>
		        				</div>
							</td>
						</tr>
						<tr>
							<td><h:commandButton styleClass="button green-bt"
							action="#{attendanceType.insert}" value="Tạo mới">
							</h:commandButton></td>
						</tr>
					</table>						
					</h:form>
				</div>
			</div>
		</div>
		
		<div class="wrap-dialog none" id="updateAttendanceTypeDialog">
			<div class="dialog">
				<span class="dialog-title">Cập nhật loại chấm công<b class="close-dialog effect">x</b></span>
				<div class="dialog-content">
					<h:form id="formUpdateattendanceType">
					<table class="input-column w100">
						<tr>
							<td>
								<div class="input-item">
		        					<span class="block required">Tên loại chấm công <img align="top"
									src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
		        					<h:inputText styleClass="input w80" value="#{attendanceType.selectedAttendanceType.name}" required="true"
		        					requiredMessage="Tên không được để trống"
		        					maxlength="100"></h:inputText>
		        					<span class="italic block">Tên loại chấm công không được phép trùng nhau</span>
		        					<span class="block">Mô tả</span>
		        					<h:inputTextarea styleClass="textarea w80" value="#{attendanceType.selectedAttendanceType.description}"
		        					maxlength="100"></h:inputTextarea>
		        				</div>
							</td>
						</tr>
						<tr>
							<td><h:commandButton styleClass="button green-bt"
							action="#{attendanceType.update}" value="Lưu lại">
							</h:commandButton></td>
						</tr>
					</table>						
					</h:form>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>